<template>

    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">货品管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="margin: 30px 3px;padding: 30px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="仓库名称">
                <el-input v-model="formInline.Name" placeholder="请输入仓库名称" clearable />
            </el-form-item>

            <el-form-item label="仓库地址">
                <el-input v-model="formInline.Address" placeholder="请输入仓库地址" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="search">查询</el-button>
                <el-button type="danger" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-button type="success" @click="handleAdd">新增+</el-button>
    <el-button type="danger" @click="Reset">批量删除</el-button>
    <el-button type="primary" @click="Reset">启用</el-button>
    <el-button type="warning" @click="Reset">停用</el-button>
    <el-button type="info" @click="Reset">锁定</el-button>

    <div style="margin: 30px 3px;">
        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            >
            <el-table-column type="index" label="序号"  width="70"/>
            <el-table-column prop="code" label="仓库编号" width="150">
                <template #default="scope">
                  <el-link 
                    type="primary" 
                    :underline="false"
                    @click="goToDetail(scope.row.code)"> <!-- 直接传入编号字符串 -->
                    {{ scope.row.code }}
                  </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="仓库名称"  width="140"/>
            <el-table-column prop="area" label="仓库容量/m³"  width="140"/>
            <el-table-column prop="address" label="仓库地址"  width="220"/>
            <el-table-column prop="department" label="库管部门"  width="140"/>
            <el-table-column prop="manager" label="仓库主管"  width="140"/>
            <el-table-column prop="zoneNumber" label="库位数量"  width="140"/>
            <el-table-column label="仓库状态" width="140">
                <template #default="scope">
                    <el-tag 
                        :type="getStatusType(scope.row.status)"
                        :effect="scope.row.status == 2 ? 'dark' : 'light'">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button 
                        type="primary" 
                        size="small" 
                        @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button 
                        type="danger" 
                        size="small" 
                        @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="pagination-container">
            <el-pagination
                v-model:current-page="PageInfo.PageIndex"
                v-model:page-size="PageInfo.PageSize"
                :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PageInfo.TotalCount"
            />
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { watch } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

// 跳转到详情页
const goToDetail = (code:any) => {
  router.push(`/warehouse-detail/${code}`);
};

//添加跳转页面
const handleAdd = () => {
    router.push('/addwarehouse');
}

// 处理删除
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确定要删除仓库 "${row.name}" 吗？此操作不可恢复！`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        // 调用删除API
        deleteWarehouse(row.id);
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        });
    });
}

// 执行删除请求
const deleteWarehouse = (id: string) => {
    axios.delete(`http://localhost:8080/api/app/ware-house-manage/${id}`)
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功!',
            });
            // 重新加载数据
            search();
        })
        .catch(error => {
            console.error("删除失败:", error);
            ElMessage({
                type: 'error',
                message: '删除失败: ' + (error.response?.data?.message || error.message),
            });
        });
}

// 获取状态显示文本
const getStatusText = (status:any) => {
    switch(Number(status)) {
        case 0: return '停用';
        case 1: return '启用';
        case 2: return '锁定';
        default: return '未知状态';
    }
}

// 获取状态标签类型
const getStatusType = (status:any) => {
    switch(Number(status)) {
        case 0: return 'danger';  // 红色 - 停用
        case 1: return 'success'; // 绿色 - 启用
        case 2: return 'info';    // 灰色 - 锁定
        default: return '';
    }
}

    //响应式数据
const tableData = ref([{
    "code": "",
    "name": "",
    "address": "",
    "status": '',
    "area": '',
    "zoneNumber": '',
    "description": "",
    "warehouseType": '',
    "manager": "",
    "department": "",
}])

    //钩子函数
    onMounted(()=>{
        search();
    })

    //分页参数
    const PageInfo=ref({
        PageIndex:1,
        PageSize:5,
        TotalCount:0,
        TotalPage:0
    })
    //查询参数
    const formInline =ref({
        Name:"",
        Address:"",
        SkipCount:0,
        MaxResultCount:10
    })

    //侦听
    watch(PageInfo,()=>{
        search();
    },{deep:true})

    //显示仓库列表
    const search=()=>{

        // 设置分页参数为数字
        formInline.value.SkipCount = (PageInfo.value.PageIndex - 1) * PageInfo.value.PageSize;
        formInline.value.MaxResultCount = PageInfo.value.PageSize;

        axios.get("http://localhost:8080/api/app/ware-house-manage/paged-list", {params: {
            Name: formInline.value.Name,
            Address: formInline.value.Address,
            SkipCount: formInline.value.SkipCount,
            MaxResultCount: formInline.value.MaxResultCount
        }})
        .then(res => {
            if(res.data && res.data.items) {
                tableData.value = res.data.items;
                PageInfo.value.TotalCount = res.data.totalCount || 0;
                PageInfo.value.TotalPage = Math.ceil(PageInfo.value.TotalCount / PageInfo.value.PageSize);
            }
        })
    }
    
    //重置按钮
    const Reset=()=>{
        formInline.value.Name="";
        formInline.value.Address="";
    }
    
</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>

<style scoped>
/* 可选：添加鼠标悬停样式 */
.el-link:hover {
  font-weight: bold;
}
</style>